<template>
    <!-- <div>
        <custom-nav-bar :text="'我的会员卡'" :bgColor="'#F0F3F7'" :frontColor="'#432F37'" showLeftIcon :isFixed="true" isPlaceholder />
    </div> -->
    <div class="g-page-box page page-card-index">
        <!-- 固定的 Tab 栏 -->
        <view class="g-flex-row tab-bar" :style="{ position: isFixed ? 'fixed' : 'static' }">
            <view
                class="g-fs-36 tab-item"
                :class="{ active: currentTab === 0 }"
                @click="switchTab(0)"
            >
                可用({{ myCardStore.useList.length || 0 }})
            </view>
            <view
                class="g-fs-36 tab-item"
                :class="{ active: currentTab === 1 }"
                @click="switchTab(1)"
            >
                历史({{ myCardStore.hisList.length || 0 }})
            </view>
        </view>

        <!-- 可滚动的内容区域 -->
        <scroll-view
            class="scroll-content"
            :scroll-y="true"
            @scroll="onScroll"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
        >
        <view v-if="currentTab === 0" class="tab-content">
            <!-- Tab 1 的列表内容 -->
            <view v-if="myCardStore.useList.length<=0">
                <no-data />
            </view>
            <view v-if="loading" class="loading-box">
                <my-loading />
            </view>
            <view class="g-radius-40 g-bg-white course-card" v-for="(item, index) in myCardStore.useList" :key="`use_${index}`">
                <view class="course-orders-box">
                    <view class="g-flex-col course-card-item">
                        <view class="g-fw-b g-flex-row course-card-item-ct">
                            <view class="g-fs-36 g-fw-b g-flex-row order-title">
                                {{ item.cardName }}
                            </view>
                        </view>
                        <view class="g-flex-row g-space-between course-card-item-ct">
                            <view class="g-flex-row order-title">
                                环操课<text class="g-fs-32 g-fw-b">1</text>个月不限次数
                            </view>
                            <view class="g-flex-row">
                                <image class="cardicon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/cardicon_2x.png"></image>
                                <text class="g-fs-28 order-ct">团课次卡</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="g-flex-row oper-box">
                    <view class="g-flex-row order-title">
                        有效期：2025-03-01 至 2025-04-01
                    </view>
                </view>
            </view>
        </view>
        <view v-if="currentTab === 1" class="tab-content">
            <!-- Tab 2 的列表内容 -->
            <view v-if="myCardStore.hisList.length<=0">
                <no-data />
            </view>
            <view v-if="loading" class="loading-box">
                <my-loading />
            </view>
            <view class="g-radius-40 g-bg-white course-card course-card-disabled" v-for="(item, index) in myCardStore.hisList" :key="`his_${index}`">
                <view class="course-orders-box">
                    <view class="g-flex-col course-card-item">
                        <view class="g-fw-b g-flex-row course-card-item-ct">
                            <view class="g-fs-36 g-fw-b g-flex-row order-title">
                                会员月卡
                            </view>
                        </view>
                        <view class="g-flex-row g-space-between course-card-item-ct">
                            <view class="g-flex-row order-title">
                                <text v-if="item.cardType!=='1'">环操课<text class="g-fs-32 g-fw-b">1</text>个月不限次数</text>
                                <text v-else>剩余次数<text class="g-fs-32 g-fw-b">{{ item.remainingCount }}</text>次数</text>
                            </view>
                            <view class="g-flex-row">
                                <image class="cardicon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/cardicon_2x.png"></image>
                                <text class="g-fs-28 order-ct">团课次卡</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="g-flex-row g-space-between oper-box">
                    <view class="g-flex-row order-title">
                        有效期：2025-03-01 至 2025-04-01
                    </view>
                    <view>
                        <button class="g-fs-28 cancel-btn">已过期</button>
                    </view>
                </view>
            </view>
        </view>
        </scroll-view>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import useLogin from "@/functions/useLogin";
import { useMyCardStore } from '@/store/myCard';
import { useGlobalStore } from "@/store/gobal";
import { onShow, onPageScroll, onLoad,onPullDownRefresh } from "@dcloudio/uni-app"
// import { debounce } from '@/utils';
// import dayjs from 'dayjs'


const currentTab = ref(0); // 当前激活的 Tab 索引
const isFixed = ref(false); // Tab 栏是否固定
let startX = 0; // 触摸开始的 X 坐标

// 切换 Tab
const switchTab = (index) => {
  currentTab.value = index;
};

// 滚动事件处理
const onScroll = (e) => {
  // 根据滚动位置判断 Tab 栏是否固定
    isFixed.value = e.detail.scrollTop > 50; // 假设滚动超过 50px 时固定 Tab 栏
    console.log(isFixed.value);
};

// 下拉刷新时调用
onPullDownRefresh(async () => {
    //   page.value = 1; // 重置页码
    //   list.value = []; // 清空列表
    //   hasMore.value = true; // 重置有更多数据的标志
    //   await fetchList(page.value, limit.value); // 重新获取数据
    console.log('下拉刷新');
    loading.value = true;
    if (currentTab.value === 0) {
        await myCardStore.getUseList();
    } else {
        await myCardStore.getHisList();
    }
    loading.value = false;
    uni.stopPullDownRefresh(); // 停止下拉刷新动画
});

// 触摸移动事件处理
const onTouchMove = (e) => {
  const moveX = e.touches[0].clientX;
  const diffX = moveX - startX;

  // 根据滑动距离判断滑动方向
  if (diffX > 30 && currentTab.value === 1) {
    // 右滑且当前在 Tab 2，切换到 Tab 1
    switchTab(0);
  } else if (diffX < -30 && currentTab.value === 0) {
    // 左滑且当前在 Tab 1，切换到 Tab 2
    switchTab(1);
  }
};

// 触摸开始事件处理
const onTouchStart = (e) => {
  startX = e.touches[0].clientX;
};

const loginS = useLogin();
const myCardStore = useMyCardStore();
const loading = ref(false);

onShow(async () => {
    const flag = await loginS.checkLogin();
    if (flag) {
        loading.value = true;
        await myCardStore.init();
        loading.value = false;
    }
});

</script>
<style scoped lang="scss">
.page-card-index {
    height:100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .tab-bar{
        display: flex;
        border-bottom: 1px solid #eee;
        justify-content: center;
        width:100%;
        box-sizing: border-box;
        padding-top:10rpx;
        background: #F0F3F7;
        z-index: 2;
        .tab-item{
            padding: 8px 16px;
            cursor: pointer;
            color: #666;
            transition: all 0.3s;
            position: relative;
            box-sizing: border-box;
            &.active{
                color: #333;
                border-bottom: none;
                font-weight: bold;
                &::after{
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 8rpx;
                    border-radius: 4rpx;
                    background-color: #7966B3;
                    transform: scaleX(1);
                    transform-origin: left center;
                    transition: transform 0.3s ease;
                }
            }
        }
    }
    .scroll-content{
        flex-grow: 1;
        overflow-y: scroll;
        .tab-content{
            padding:40rpx 24rpx;
        }
    }
    .tip{
        width: 100%;
        height: 64rpx;
        background: #E8EBF3;
        .tip-icon{
            height:36rpx;
            width: 36rpx;
            margin-left: 24rpx;
        }  
    }
    .course-card-box{
        padding: 40rpx 24rpx;
    }
    .course-card {
        overflow: hidden;
        padding: 0rpx;
        padding-top: 0;
        box-sizing: border-box;
        margin-bottom:40rpx;
        .course-orders-box{
            padding:4rpx 32rpx 32rpx 32rpx;
        }
        .date-query-box {
            display: flex;
            justify-content: space-between; // 图标均匀分布
            flex-wrap: nowrap; // 超出自动换行
            .date-query-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                border-radius: 50rpx;
                padding: 22rpx;
                background: #F0F2FA;

                .date-query-item-label {
                    padding-bottom: 32rpx;
                    font-weight: bold;
                }

                .date-query-item-date {
                    color: #666;
                }
            }

            .date-query-item.date-query-box-disable {
                .date-query-item-label {
                    color: #D5D5D5;
                }

                .date-query-item-date {
                    color: #D5D5D5;
                }
            }

            .date-query-item.date-query-item-active {
                .date-query-item-label {
                    color: #7966B3;
                }

                .date-query-item-date {
                    color: #7966B3;
                    font-weight: bold;
                }
            }
        }

        .course-orders-box {
            .course-card-item {  
                .cardicon{
                    width: 60rpx;
                    height: 40rpx;
                    margin-right: 12rpx;
                }
                .course-card-item-hd {
                    width: 100%;
                    padding-bottom: 20rpx;
                    padding-top: 32rpx;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between; // 图标均匀分布

                    .course-remaining-box {
                        color: #999;

                        .split-icon {
                            width: 6rpx;
                            height: 16rpx;
                            border-radius: 4rpx;
                            background: #7966B3;
                            margin-right: 12rpx;
                        }

                        .remain-count {
                            color: #333;
                        }
                    }
                }
                .line{
                    width: 100%;
                    height: 1px;
                    border-bottom: 2px dashed #E4E4E4;
                }
                .course-card-item-ct {
                    width: 100%;
                    padding-top: 26rpx;

                    .course-card-item-avatar-box {
                        margin-right: 28rpx;

                        .course-card-item-avatar {
                            width: 140rpx;
                            height: 140rpx;
                            border-radius: 70rpx;
                        }
                    }

                    .course-info-box {
                        flex: 1;

                        .course-name {
                            // 超过隐藏
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; // 显示行数
                            -webkit-box-orient: vertical; // 垂直排列
                            line-height: 44rpx;
                        }

                        .course-desc {
                            padding: 16rpx 0rpx;
                            font-size: 28rpx;
                            color: #666666;
                            line-height: 34rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; // 显示行数
                            -webkit-box-orient: vertical; // 垂直排列
                        }

                        .course-name-box {
                            line-height: 40rpx;

                            .course-age {
                                margin-left: 16rpx;
                                border-radius: 8rpx;
                                border: 1px solid #CBCBCB;
                                padding: 4rpx 10rpx;
                            }
                        }

                        .course-card-box {
                            width: 100%;
                            justify-content: space-between;
                            align-items: baseline;
                            padding-top: 10rpx;
                            padding-bottom: 37rpx;
                            border-bottom: 1px solid #D8D8D8;

                            .price-box {
                                align-items: baseline;
                            }

                            .tag1 {
                                font-size: 24rpx;
                                background: linear-gradient(180deg, #ECD17E 0%, #E2973B 100%);
                                border-radius: 8rpx 200rpx 8rpx 8rpx;
                                padding: 5rpx 20rpx 5rpx 10rpx;
                                color: #B04309;
                            }

                            .sale-price {
                                color: #7966B3;
                                font-size: 44rpx;
                                font-weight: bold;
                                margin-left: 12rpx;
                                margin-right: 12rpx;
                            }

                            .market-price {
                                text-decoration: line-through;
                                color: #999;
                                font-size: 24rpx;
                            }

                            .order-course {
                                margin: 0;
                                padding: 0;
                                line-height: 56rpx;
                                width: 120rpx;
                                height: 56rpx;
                                border-radius: 12rpx;
                                background: #7966B3;
                                font-size: 28rpx;
                                color: #fff;
                            }
                        }
                    }
                }
                .course-card-item-ct1 .order-ct{
                    color: #7966B3;
                    background: #F4F1FF;
                    border-radius: 22rpx;
                    padding:5rpx 16rpx;
                }
            }
        }
    }
    .oper-box{
       width:100%;
       height: 96rpx;
       box-sizing: border-box;
       padding-left:32rpx;
       padding-right:32rpx;
       background: #E8EBF3;
       .cancel-btn{
            height: 56rpx;
            background: #FFFFFF;
            border-radius: 12rpx 12rpx 20rpx 12rpx;
            border: 2rpx solid #333333;
            text-align: center;
            line-height: 56rpx;
            margin:0rpx;
            padding:0rpx;
            padding-left:32rpx;
            padding-right:32rpx;
       }
    }
    .oper-box.oper-box-today{
        color:#fff;
        background:#7966B3
    }
    .oper-box.oper-box-disable{
        opacity: 0.5;
    }

    .course-card-disabled{
        opacity: 0.5;
        .oper-box{
            .cancel-btn{
                color: #999;
                border-color:  #E5E5E5;
                background: #E5E5E5;
                border-radius: 12rpx 12rpx 20rpx 12rpx;
                &:after{
                    border: none;
                }
            }
        }
    }
}
</style>